<template>
  <div class="basic-config-container">
    <div class="page-header">
      <h2>基本设置</h2>
      <p>配置系统的基本信息，如系统名称、logo、联系方式等</p>
    </div>

    <div class="config-content">
    <a-form :model="form" layout="vertical">
      <a-form-item label="系统名称" name="systemName">
        <a-input v-model:value="form.systemName" placeholder="请输入系统名称" />
      </a-form-item>
      <a-form-item label="系统描述" name="systemDescription">
        <a-textarea v-model:value="form.systemDescription" placeholder="请输入系统描述" :rows="3" />
      </a-form-item>
      <a-form-item label="联系邮箱" name="contactEmail">
        <a-input v-model:value="form.contactEmail" placeholder="请输入联系邮箱" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleSave">保存设置</a-button>
      </a-form-item>
    </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { message } from 'ant-design-vue'

const form = reactive({
  systemName: 'AnyPay支付管理系统',
  systemDescription: '统一支付管理平台，提供完整的支付解决方案',
  contactEmail: 'admin@anypay.com.cn'
})

const handleSave = () => {
  message.success('基本设置已保存')
}
</script>

<style scoped>
.basic-config-container {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-header {
  padding: 24px 24px 0 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-bottom: 1px solid #e8e8e8;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.page-header p {
  margin: 0 0 24px 0;
  color: #6b7280;
  font-size: 14px;
}

.config-content {
  min-height: 600px;
  background: #fff;
  padding: 24px;
}
</style>